<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>新增工艺流程</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">

    </style>
  </head>
  <body>
  <script src="./js/main.js" charset="utf-8"></script>
<!--  <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
  <script src="./layui/layui.js" charset="utf-8"></script>
  <script src="./js/jQuery.main.js"></script>
  <script src="./js/xm-select.js" type="text/javascript" charset="utf-8"></script>



  <form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
      <div class="layui-block">
        <label class="layui-form-label">工序名称：</label>
        <input type="text" name="processName" lay-verify="required" autocomplete="" class="layui-input" style="width: 14em;"
               placeholder="请输入工序名称">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-block">
        <label class="layui-form-label">工作中心：</label>
        <input type="text" name="workCenter" lay-verify="required" autocomplete="" class="layui-input" style="width: 14em;"
               placeholder="请输入工作中心">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-block">
        <label class="layui-form-label">加工车间：</label>
        <input type="text" name="workshop" lay-verify="required" autocomplete="" class="layui-input" style="width: 14em;"
               placeholder="请输入加工车间">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-block">
        <label class="layui-form-label">工序说明：</label>
        <input type="text" name="processExplain" lay-verify="required" autocomplete="" class="layui-input" style="width: 14em;"
               placeholder="请输入工序说明">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-block">
        <label class="layui-form-label">工序控制码：</label>
        <input type="text" name="processCode" lay-verify="required" autocomplete="" class="layui-input" style="width: 14em;"
               placeholder="请输入工序说明">
      </div>
    </div>

    <div class="layui-form-item" >
      <label class="layui-form-label">部门：</label>
      <div class="layui-input-inline " style="width: 15em">
        <select name="deptName" id="deptName" lay-verify="required" lay-filter="deptName">
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-block" style="width: 7em;"><label class="layui-form-label">选择机器：</label></div>
      <div class="layui-input-inline" style="width: 7em;"><div id="machine" style="width: 35em;" lay-filter="machine" ></div></div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">是否耗材：</label>
      <div class="layui-input-block">
        <input type="radio" name="consume" value="1" title="是" checked>
        <input type="radio" name="consume" value="0" title="否">
      </div>
      <span>(耗材工序报工时需要上报材料批号)</span>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <input type="text" name="process" style="display: none;" value="0">
      <button type="button" class="layui-btn" lay-submit=''>添加工序</button>
    </div>
  </form>

  <script type="text/javascript">
    var form = null;
    var laydate = null;
    let isAd=null;
    let thisDept=null;

    layui.use(['form', 'laydate'], function() {
      form = layui.form;
      laydate = layui.laydate;

      $.ajax({
        url: url + '/sys-dept/listDept',
        method: 'POST',
        async : false,
        contentType: 'application/json',
        success: function(res) {
          //显示前先判断是否为管理员
          $.ajax({
            url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
            method: 'GET',
            async : false,
            contentType: 'application/json',
            success: function (res) {
              if (res.code===200){
                isAd=1;
              }
              else if (res.code===400){
                isAd=0;
                thisDept=res.data.dept;
              }
            }
          })
          //按照是否为管理员显示下拉框
          if (res.code == 200) {
            for (var i = 0; i < res.data.length; i++) {
              if(isAd===1){
                $("#deptName").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
              }else if (isAd===0&&res.data[i].dept===thisDept){
                $("#deptName").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
              }
            }
            form.render('select');
          }
        }
      })

      form.on('submit', function() {
        $.ajax({
          url: '/sys-user/getAdminLevel/'+sessionStorage.getItem('userId'),
          method: 'GET',
          contentType: 'application/json',
          success: function (res) {
            if (res.code === 200) {
              var data = form.val('data');
              data.processDept=$('#deptName').val();
              data.userId=sessionStorage.getItem('userId');
              let confirm1=layer.confirm('确定新增工序吗？', {
                btn: ['确定','取消']
              },function () {
                $.ajax({
                  url: url + '/process-info/save',
                  method: 'POST',
                  contentType: 'application/json',
                  data: JSON.stringify(data),
                  success: function (res) {
                    parent.layer.alert(res.msg);
                    if (res.code == 200) parent.switchNav(0);
                  }
                })
                layer.close(confirm1);
              },function (){
                layer.close(confirm1);
              })
            }else {
              layer.msg("权限不足");
            }
          }
        })
      })

      //下拉框二级联动
      form.on('select(deptName)', function(data) {
        var options = {
          el: '#machine',
          name: 'machine',//表单的name属性
          id: 'chooseMachine',//表单的id属性
          filterable: true,
          layVerify: 'required',//必填项
          //layVerType: 'tips',//提示类型 同layui
          tips: '请选择机器...',
          autoRow: true,
          toolbar: {//工具条,全选,清空,反选,自定义
            show: true,
            list: [
              'ALL',
              'CLEAR',
              'REVERSE',
            ]
          },
          data: [],
        };

        var process = xmSelect.render(options)

        setTimeout(function () {
          $.ajax({
            url: url + '/all-machine/listMachine',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
              userId: sessionStorage.getItem('userId'),
              deptId: $('#deptName').val()
            }),
            success: function (res) {
              //data是ajax 异步获取的
              var data = [];
              for (var i = 0; i < res.data.length; i++) {
                data.push({
                  name: res.data[i].machineModel,
                  value: res.data[i].id
                });
              }
              //模拟通过ajax 获取json数据,异步更新多选下拉框的值
              process.update({data: data})
            }
          })
        }, 100);
        form=layui.form;
        form.render('select');
      });

    });

    var options = {
      el: '#machine',
      name: 'machine',//表单的name属性
      id: 'chooseMachine',//表单的id属性
      filterable: true,
      layVerify: 'required',//必填项
      //layVerType: 'tips',//提示类型 同layui
      tips: '请选择机器...',
      toolbar: {//工具条,全选,清空,反选,自定义
        show: true,
        list: [
          'ALL',
          'CLEAR',
          'REVERSE',
        ]
      },
      data: [],
    };

    var process = xmSelect.render(options)

    setTimeout(function(){
      $.ajax({
        url: url + '/all-machine/listMachine',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          userId: sessionStorage.getItem('userId'),
          deptId: $('#deptName').val()
        }),
        success: function(res) {
          //data是ajax 异步获取的
          var data =[];
          for (var i = 0; i < res.data.length; i++) {
            data.push({
              name : res.data[i].machineModel,
              value :res.data[i].id
            });
          }
          //模拟通过ajax 获取json数据,异步更新多选下拉框的值
          process.update({data: data})
        }
      })
    },100);

  </script>
  </body>
</html>
